.portal-page-wrapper {
  width: 100%;
  height: max-content;
  background: #f5f7fa;
  padding-bottom: 24px;
  header {
    height: 72px;
    background: #0779ff;
    div {
      width: 1280px;
      height: 100%;
      margin: 0 auto;
      img {
        display: block;
        width: 266px;
        height: 25px;
      }
    }
  }
  .main-content {
    width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 3px;
    padding: 20px;
    margin-top: 24px;
    display: flex;
    .left-box {
      width: 132px;
      height: 920px;
      background:
        url('/static/img/portal/left-bg.png') no-repeat 0 0,
        rgba(7, 121, 255, 0.1);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
      font-weight: bold;
      color: #333333;
      writing-mode: vertical-rl; /* 从上到下排列，默认为从左到右 */
      text-orientation: upright; /* 使文字正常显示，而非旋转 */
      letter-spacing: 4px;
      cursor: pointer;
      border: 1px solid transparent;
      &:hover {
        border: 1px solid #0779ff;
      }
    }
    .center-box {
      width: 796px;
      margin-left: 16px;
      margin-top: -22px;
      .title {
        height: 48px;
        background: linear-gradient(270deg, rgba(141, 193, 255, 0.2) 0%, rgba(7, 121, 255, 0.2) 100%);
        border-radius: 4px 4px 0px 0px;
        font-size: 18px;
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: bold;
        color: #333333;
        line-height: 48px;
        padding-left: 18px;
        margin-top: 22px;
      }
      .title2 {
        background: linear-gradient(270deg, rgba(135, 232, 222, 0.2) 0%, rgba(24, 194, 195, 0.2) 100%);
      }
      .title3 {
        background: linear-gradient(270deg, rgba(255, 214, 145, 0.2) 0%, rgba(250, 140, 22, 0.2) 100%);
      }
      .title4 {
        background: linear-gradient(270deg, rgba(211, 172, 247, 0.2) 0%, rgba(115, 45, 209, 0.2) 100%);
      }
      .common-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        background: #fafafa;
        padding: 16px;
        padding-left: 0;
        div {
          height: 48px;
          display: flex;
          align-items: center;
          background: #ffffff;
          border-radius: 4px;
          padding-left: 16px;
          margin-left: 16px;
          cursor: pointer;
          img {
            width: 16px;
          }
          span {
            display: block;
            font-size: 16px;
            font-family: MicrosoftYaHeiUI;
            color: #333333;
            line-height: 16px;
            margin-left: 8px;
          }
          &.disabled {
            background: #ced8e5;
            cursor: not-allowed;
            span {
              color: #666666;
            }
          }
        }
      }
      .server-side {
        div {
          width: 179px;
          span {
            width: 80px;
          }
        }
      }
      .assets-service {
        div {
          width: 244px;
        }
      }
      .quality-inspect {
        div {
          width: 764px;
        }
      }
      .build-factory {
        padding-bottom: 0;
        div {
          width: 244px;
          margin-bottom: 16px;
        }
      }
    }
    .right-box1 {
      margin-left: 16px;
      .top {
        width: 132px;
        height: 278px;
        background: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(7, 121, 255, 0.1);
        border-radius: 8px;
        border: 1px solid transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        img {
          width: 88px;
        }
        p {
          font-size: 20px;
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-weight: bold;
          color: #333333;
          line-height: 20px;
          margin-top: 30px;
        }
        &:hover {
          border: 1px solid #0779ff;
        }
      }
      .footer {
        width: 132px;
        height: 620px;
        background: rgba(7, 121, 255, 0.1);
        border-radius: 8px;
        border: 1px solid transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 22px;
        cursor: pointer;
        img {
          width: 88px;
        }
        p {
          font-size: 20px;
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-weight: bold;
          color: #333333;
          line-height: 20px;
          margin-top: 30px;
        }
        &:hover {
          border: 1px solid #0779ff;
        }
      }
    }
    .right-box2 {
      width: 132px;
      height: 920px;
      background:
        url('/static/img/portal/right-bg.png') no-repeat 0 0,
        rgba(7, 121, 255, 0.1);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
      font-weight: bold;
      color: #333333;
      writing-mode: vertical-rl; /* 从上到下排列，默认为从左到右 */
      text-orientation: upright; /* 使文字正常显示，而非旋转 */
      letter-spacing: 4px;
      cursor: pointer;
      border: 1px solid transparent;
      margin-left: 16px;
      &:hover {
        border: 1px solid #0779ff;
      }
    }
  }
  .backIndex {
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 10;
    left: 50px;
    bottom: 80px;
    background: url(/static/home/home.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    &:hover {
      background: url(/static/home/homeHover.png) no-repeat;
      background-size: 100%;
    }
  }
}
